<template>
  <div>
    <el-form id="teacherAdd" ref="tRuleForm" :disabled="formDis" :model="tRuleForm" :rules="rules" label-width="100px" class="demo-tRuleForm" style="margin-top: 20px;">
      <h2 style="margin-left: 20px;">讲师基本信息</h2>
      <el-row>
        <el-col :span="12" >
          <el-form-item label="讲师类型" prop="type">
            <el-select v-model="tRuleForm.type" placeholder="请选择讲师类型">
              <el-option label="禅修" value="0" />
              <el-option label="其他" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="讲师编号" prop="number">
            <el-input v-model="tRuleForm.number" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="tRuleForm.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="性别" prop="sex">
            <el-select v-model="tRuleForm.sex" placeholder="请选择性别">
              <el-option label="男" value="1" />
              <el-option label="女" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" >
          <el-form-item label="用户名称" prop="idType">
            <el-input v-if="hasUserName" :disabled="true" v-model="tRuleForm.sysUser.username" type="text" />
            <el-select v-else v-model="tRuleForm.uid" placeholder="请选择用户">
              <el-option v-for="(item, index) in userList" :key="index" :label="item.username" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item prop="birthday" label="生日">
            <el-date-picker v-model="tRuleForm.birthday" type="date" placeholder="选择生日" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" >
          <el-form-item label="证件类型" prop="idType">
            <el-select v-model="tRuleForm.idType" placeholder="请选择证件类型">
              <el-option label="身份证" value="0" />
              <!-- <el-option label="港澳证件" value="1" /> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="邮箱" prop="mail">
            <el-input v-model="tRuleForm.mail" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" >
          <el-form-item label="证件号码" prop="idNo">
            <el-input v-model="tRuleForm.idNo" />
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="微信号" prop="wechat">
            <el-input v-model="tRuleForm.wechat" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" >
          <el-form-item label="QQ号" prop="qq">
            <el-input v-model="tRuleForm.qq" />
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="电话号码" prop="phone">
            <el-input v-model="tRuleForm.phone" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" >
          <el-form-item label="手机号码" prop="mobilePhone">
            <el-input v-model="tRuleForm.mobilePhone" />
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="地址" prop="address">
            <el-input v-model="tRuleForm.address" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" >
          <el-form-item label="省市" prop="cityCode">
            <el-cascader
              ref="city"
              v-model="tRuleForm.cityCode"
              :options="tRuleForm.options"
              :separator="'-'"
              :disabled="tinymceDis"
              placeholder="请选择省市"
              size="large"
              @change="handleChange"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class="add_tip" label="头像">
        <el-upload
          :before-remove="beforeRemove"
          :before-upload="beforeAvatarUpload"
          :on-success="change"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :data="uploadData"
          :action="actionUrl"
          with-credentials
          multiple
          class="upload-demo"
          accept=".jpg,.jpeg,.png,.JPG,.JPEG,.gif,.Gif">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png/gif文件</div>
        </el-upload>
        <img :src="tRuleForm.headImg" :v-if="tRuleForm.headImg" :style="tRuleForm.headImg ? 'width: 126px;' : ''" alt="">
      </el-form-item>
      <hr>
      <h2 style="margin-left: 20px;">讲师介绍</h2>
      <el-form-item label="标题" prop="title">
        <el-input v-model="tRuleForm.title" type="text" />
      </el-form-item>
      <el-form-item class="add_tip" label="封面图">
        <el-upload
          :before-remove="beforeRemove2"
          :before-upload="beforeAvatarUpload2"
          :on-success="change2"
          :limit="1"
          :on-exceed="handleExceed2"
          :file-list="fileList"
          :data="uploadData"
          :action="actionUrl"
          with-credentials
          multiple
          class="upload-demo"
          accept=".jpg,.jpeg,.png,.JPG,.JPEG,.gif,.Gif">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png/gif文件</div>
        </el-upload>
        <img :src="tRuleForm.coverImg" :v-if="tRuleForm.coverImg" :style="tRuleForm.coverImg ? 'width: 326px;' : ''" alt="">
      </el-form-item>
      <el-form-item class="add_tip" label="海报图">
        <el-upload
          :before-remove="beforeRemove3"
          :before-upload="beforeAvatarUpload"
          :on-success="change3"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :data="uploadData"
          :action="actionUrl"
          with-credentials
          multiple
          class="upload-demo"
          accept=".jpg,.jpeg,.png,.JPG,.JPEG,.gif,.Gif">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png文件</div>
        </el-upload>
        <img :src="tRuleForm.posterImg" :v-if="tRuleForm.posterImg" :style="tRuleForm.posterImg ? 'width: 326px;' : ''" alt="">
      </el-form-item>
      <el-form-item class="add_tip" label="资历背景">
        <div>
          <div v-if="formDis" class="tin_box" v-html="tRuleForm.seniority" />
          <tinymce v-else v-model="tRuleForm.seniority" :height="300" :disabled="tinymceDis" />
        </div>
      </el-form-item>
      <el-form-item label="擅长领域" prop="goodField">
        <el-input v-model="tRuleForm.goodField" type="textarea" maxlength="1000" />
      </el-form-item>
      <el-form-item label="经历" prop="experience">
        <el-input v-model="tRuleForm.experience" type="textarea" maxlength="1000" />
      </el-form-item>
      <el-form-item label="课程体系" prop="courseStructure">
        <el-input v-model="tRuleForm.courseStructure" type="textarea" maxlength="1000" />
      </el-form-item>
      <el-form-item label="授课风采">
        <div :class="{'look': formDis}" style="display: flex;flex-wrap:wrap;flex-direction: row;">
          <div v-for="(item, i) in tRuleForm.teachImgs" :key="i" class="span_box">
            <img v-if="tRuleForm.teachImgs && tRuleForm.teachImgs.length > 0" :src="item" alt="" >
            <div class="shadow">
              <img class="delete" alt="" src="../../assets/article/delete.png" @click="deleteFunc(i)">
            </div>
          </div>
        </div>
        <div>
          <span v-if="!formDis" class="span_box" style="display: block;">
            <el-upload
              :before-upload="beforeAvatarUpload3"
              :on-preview="handlePictureCardPreview"
              :on-success="changeSuccess"
              :action="actionUrl"
              :data="uploadData"
              :file-list="fileList3"
              with-credentials >
              <i class="el-icon-plus avatar-uploader-icon" style="font-size: 50px;padding: 30px;" />
            </el-upload>
          </span>
        </div>
      </el-form-item>
      <el-form-item>
        <div v-if="isAdd">
          <el-button type="info" @click="$router.replace('/teacher/teacherList')">取消新增</el-button>
          <el-button v-preventReClick type="primary" @click="submitForm('tRuleForm')">新增</el-button>
        </div>
        <div v-if="!isAdd">
          <el-button type="info" @click="$router.replace('/teacher/teacherList')">取消修改</el-button>
          <el-button v-preventReClick type="primary" @click="submitForm('tRuleForm')">确认修改</el-button>
        </div>
        <!--<el-button @click="resetForm('tRuleForm')">重置</el-button>-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import config from '@/utils/config';
import { checkPhone, checkIdCard, checkEmail } from '@/utils/regUtil';
import { checkNotEmail, checkNum } from '@/utils/validateUtil';
import { edit, add, getTeacherDetail } from '@/api/teacher'
import { getUserList } from '@/api/sysUser'
import Tinymce from '@/components/Tinymce'
import { removeArray } from '@/utils/index.js'
import { Message } from 'element-ui'
import { provinceAndCityData, regionData, CodeToText, TextToCode } from 'element-china-area-data'
import mixin from '@/mixin'

let urlList = []
let over = false;

// 表单正则校验
const validateName = (rule, value, callback) => {
  const reg = /^[\u4e00-\u9fa5 ]{2,10}$/;
  const reg1 = /^[a-zA-Z\/ ]{4,40}$/;
  if (!reg.test(value) && !reg1.test(value)) {
    callback(new Error())
  }
  callback()
};
const validatephone = (rule, value, callback) => {
  if (!checkPhone(value)) {
    callback(new Error())
  }
  callback()
};
const validateIdCard = (rule, value, callback) => {
  if (!checkIdCard(value)) {
    callback(new Error())
  }
  callback()
};
const validateMail = (rule, value, callback) => {
  if (!checkNotEmail(value)) {
    callback(new Error())
  }
  callback()
};
const validateNum = (rule, value, callback) => {
  if (!checkNum(value)) {
    callback(new Error())
  }
  callback()
};

export default {
  name: 'TinymceDemo',
  components: { Tinymce },
  mixins: [mixin],
  data() {
    return {
      userList: [],
      hasUserName: true,
      tRuleForm: {
        tid: '',
        uid: '',
        type: '',
        number: '',
        name: '',
        sex: '',
        birthday: '',
        headImg: '',
        mobilePhone: '',
        phone: '',
        mail: '',
        wechat: '',
        qq: '',
        idType: '',
        idNo: '',
        province: '', // 省中文String
        city: '', // 市中文String
        cityCode: [], // 省市编码Array
        options: provinceAndCityData,
        address: '',
        title: '',
        coverImg: '',
        posterImg: '',
        seniority: '',
        goodField: '',
        experience: '',
        courseStructure: '',
        teachImg: null,
        teachImgs: [],
        createDate: '',
        lastUpdateDate: '',
        sysUser: {
          username: null
        }
      },
      rules: {
        type: [
          { required: true, message: '请选择课程类型', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        name: [
          // {
          //   pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
          //   message: '姓名不支持特殊字符',
          //   trigger: 'blur'
          // },
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { validator: validateName, message: '姓名格式为2-10个中文或4-20个英文', trigger: 'blur' }
        ],
        idType: [
          { required: true, message: '请选择证件类型', trigger: 'blur' }
        ],
        idNo: [
          { required: true, message: '请输入证件号码', trigger: 'blur' },
          { validator: validateIdCard, message: '请输入正确的身份证号码', trigger: 'blur' }
        ],
        mobilePhone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatephone, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        birthday: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        // 校验省市
        cityCode: [
          { type: 'array', required: true, message: '请输选择省市', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' },
          { max: 100, message: '长度在 100 个字符之内', trigger: 'blur' }
        ],
        // 非必填累类
        mail: [
          { required: false, message: '请输入地址', trigger: 'blur' },
          { max: 100, message: '长度在 100 个字符之内', trigger: 'blur' },
          { validator: validateMail, message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        qq: [
          { required: false, message: '请输入地址', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
          { validator: validateNum, message: '请输入正确的qq号码', trigger: 'blur' }
        ],
        teachImgs: [
          { required: false, message: '请添加教师风采图片', trigger: 'change' }
        ],
        goodField: [// 擅长领域
          { required: false, message: '擅长领域为非必填', trigger: 'blur' },
          { max: 999, message: '长度不能超过1000个字符', trigger: 'blur' }
        ],
        experience: [// 经历
          { required: false, message: '经历为非必填', trigger: 'blur' },
          { max: 999, message: '长度不能超过1000个字符', trigger: 'blur' }
        ],
        courseStructure: [// 课程体系
          { required: false, message: '课程体系为非必填', trigger: 'blur' },
          { max: 999, message: '长度不能超过1000个字符', trigger: 'blur' }
        ]
      },
      fileList: [],
      actionUrl: config.BaseUrl + '/image/upload',
      uploadData: {
        key: '',
        token: ''
      },
      formDis: false, // 编辑禁用
      tinymceDis: false, // 文本编译器禁用
      wechatDisabled: true, // 微信号不允许更改
      dialogImageUrl: '',
      dialogVisible: false,
      fileList3: [],
      isAdd: true
    }
  },
  watch: {
    'tRuleForm.uid'(nowVal, oldVal) {
      if (JSON.stringify(this.$route.query) === '{}') { // 新增
        const userJson = this.userList.filter(item => item.id === nowVal)
        this.tRuleForm.mobilePhone = userJson[0].phone
        this.tRuleForm.name = userJson[0].name
      }
    }
  },
  created() {
    // console.log(this.$route.query)
  },
  mounted() {
    const that = this
    this.getUser()
    console.log(this.$route.query)
    if (JSON.stringify(this.$route.query) !== '{}') {
      // console.log('this.$route.query', this.$route.query.tid)
      // console.log('this.$route.query.isEdit', this.$route.query.isEdit)
      getTeacherDetail(this.$route.query.tid).then(res => {
        console.log('res:', res.data)
        // 编辑
        const info = JSON.parse(localStorage.getItem('isEdit'))
        // console.log(info)
        this.tRuleForm = res.data
        this.tRuleForm.goodField = this.changeToHtml(this.tRuleForm.goodField)
        this.tRuleForm.experience = this.changeToHtml(this.tRuleForm.experience)
        this.tRuleForm.courseStructure = this.changeToHtml(this.tRuleForm.courseStructure)
        if (!info.isEdit) {
          this.formDis = true
          this.tinymceDis = true
        }
        this.hasUserName = true
        // this.oldbankCardInfo = Object.assign({}, res.data.bankCardInfo)
        this.$data.isAdd = false;
        this.$data.tRuleForm = res.data
        this.$data.tRuleForm.type = that.$data.tRuleForm.type !== null ? that.$data.tRuleForm.type.toString() : null;
        this.$data.tRuleForm.idType = that.$data.tRuleForm.idType !== null ? that.$data.tRuleForm.idType.toString() : null;
        this.$data.tRuleForm.sex = that.$data.tRuleForm.sex !== null ? that.$data.tRuleForm.sex.toString() : null;
        urlList = this.$data.tRuleForm.teachImgs;
        this.$data.tRuleForm.birthday = new Date(Number(this.$data.tRuleForm.birthday));
        this.$data.tRuleForm.options = provinceAndCityData
        // if (!this.tRuleForm.province) {
        //   this.tRuleForm.province = '110000'
        //   this.tRuleForm.city = '110100'
        // }
        // const cityCodes = [this.tRuleForm.province, this.tRuleForm.city]
        // cityCodes.push(this.tRuleForm.province)
        // cityCodes.push(this.tRuleForm.city)
        const cityCodes = [TextToCode[this.tRuleForm.province].code, TextToCode[this.tRuleForm.province][this.tRuleForm.city].code]
        this.tRuleForm.cityCode = cityCodes
        return false;
      })
    } else {
      this.hasUserName = false
      this.$data.isAdd = true;
    }
  },
  methods: {
    changeToCode(str) {
      return str.replace(/\r\n|\r|\n/g, '<br/>')
    },
    changeToHtml(str) {
      return str.replace(/<br\s*\/?>/g, '\n')
    },
    handleChange(value) {
      // this.tRuleForm.province = value[0] // CodeToText[value[0]]
      // this.tRuleForm.city = value[1] // CodeToText[value[1]]
      this.tRuleForm.province = CodeToText[value[0]]
      this.tRuleForm.city = CodeToText[value[1]]
      console.log(this.tRuleForm.province, this.tRuleForm.city)
      console.log(this.tRuleForm.cityCode)
    },
    getUser() {
      getUserList().then(res => {
        if (parseInt(res.code) === 200) {
          this.userList = res.data
          console.log('getUserList:', this.userList)
        } else {
          this.$message.error(res.data)
        }
      })
    },
    request(data) {
      data.goodField = this.changeToCode(data.goodField)
      data.experience = this.changeToCode(data.experience)
      data.courseStructure = this.changeToCode(data.courseStructure)
      if (this.$data.isAdd) {
        add(data).then(response => {
          if (Number(response.code) === 200) {
            Message.success('信息新增成功')
            this.$router.replace('/teacher/teacherList');
          } else {
            Message.error(response.message + '-' + response.data)
          }
        })
      } else {
        // 编辑讲师标记,设定bankCardInfo为null
        data.bankCardInfo = null
        edit(data).then(response => {
          if (Number(response.code) === 200) {
            Message.success('信息完善成功')
            this.$router.replace('/teacher/teacherList');
          } else {
            Message.error(response.message + '-' + response.data)
          }
        })
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(123)
          if (!this.tRuleForm.birthday || this.tRuleForm.birthday == null) {
            Message.error('请选择出生日期')
            return false
          }
          if (new Date(this.tRuleForm.birthday).getTime() >= new Date().getTime()) {
            Message.error('出生日期必须小于当前日期')
            return false
          }
          if (this.tRuleForm.coverImg === '' || this.tRuleForm.coverImg == null) {
            Message.error('封面图片未上传')
            return false
          }
          // if (this.tRuleForm.teachImgs == null || this.tRuleForm.teachImgs.length === 0) {
          //   Message.error('授课风采至少上传一张图片')
          //   return false
          // }
          this.tRuleForm.birthday = new Date(this.tRuleForm.birthday).getTime();
          this.request(this.tRuleForm)
        } else {
          this.validateError()
          return false;
        }
      });
    },
    resetForm(formName) {
      over = true;
      this.$store.dispatch('tResetFunc').then(() => {
      }).catch((err) => {
        Message.error(err.err)
      })
      this.tRuleForm.coverImg = '';
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      if (file && file.status === 'success') {
        return this.$confirm(`确定移除 ${file.name}？`).then(() => {
          this.tRuleForm.coverImg = null
        })
      }
    },
    beforeAvatarUpload(file) {
      const isPNG = file.type === 'image/png'
      const isJPEG = file.type === 'image/jpeg'
      const isJPG = file.type === 'image/jpg'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isPNG && !isJPEG && !isJPG && !isGIF) {
        this.$message.error('上传头像图片只能是 jpg、png、jpeg、gif 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      console.log(file.name)
      this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`
    },
    change(file, fileList) {
      if (Number(fileList.response.code) === 200) {
        this.$data.tRuleForm.headImg = config.ImgUrl + fileList.response.data;
        Message.success('图片上传成功')
      } else {
        Message.error('图片上传失败')
      }
    },
    handleExceed2(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove2(file, fileList) {
      if (file && file.status === 'success') {
        return this.$confirm(`确定移除 ${file.name}？`).then(() => {
          this.tRuleForm.coverImg = null
        })
      }
    },
    beforeAvatarUpload2(file) {
      const isPNG = file.type === 'image/png'
      const isJPEG = file.type === 'image/jpeg'
      const isJPG = file.type === 'image/jpg'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isPNG && !isJPEG && !isJPG && !isGIF) {
        this.$message.error('上传头像图片只能是 jpg、png、jpeg、gif 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`
    },
    change2(file, fileList) {
      if (Number(fileList.response.code) === 200) {
        this.$data.tRuleForm.coverImg = config.ImgUrl + fileList.response.data;
        Message.success('图片上传成功')
      } else {
        Message.error('图片上传失败')
      }
    },
    changeSuccess(file, fileList) {
      console.log(fileList)
      if (Number(fileList.response.code) === 200) {
        const dataList = this.tRuleForm.teachImgs == null ? [] : this.tRuleForm.teachImgs;
        Message.success('图片上传成功')
        dataList.push(config.ImgUrl + fileList.response.data)
        this.$data.tRuleForm.teachImgs = dataList
      } else {
        Message.error('图片上传失败')
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeAvatarUpload3(file) {
      const isPNG = file.type === 'image/png'
      const isJPEG = file.type === 'image/jpeg'
      const isJPG = file.type === 'image/jpg'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isPNG && !isJPEG && !isJPG && !isGIF) {
        this.$message.error('上传头像图片只能是 jpg、png、jpeg、gif 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      this.uploadData.key = `upload_pic_${new Date().getTime()}_${file.name}`
    },
    deleteFunc(i) {
      const listData = this.$data.tRuleForm.teachImgs;
      listData.splice(i, 1);
      this.$data.tRuleForm.teachImgs = listData;
    },
    change3(file, fileList) {
      console.log(fileList)
      if (Number(fileList.response.code) === 200) {
        this.$data.tRuleForm.posterImg = config.ImgUrl + fileList.response.data;
      }
    },
    beforeRemove3(file, fileList) {
      if (file && file.status === 'success') {
        return this.$confirm(`确定移除 ${file.name}？`).then(() => {
          this.tRuleForm.posterImg = null
        })
      }
    }
  }
}
</script>

<style>
  .span_box {
    width:160px;
    height:160px;
    display:table-cell;
    vertical-align: middle;
    text-align: center;
    border:1px solid #f3f3f3;
    text-align:center;
    line-height:160px;
    position: relative;
    overflow: hidden;
  }
  .span_box img {
    max-width: 100%;
    max-height: 100%;
  }
  .shadow {
    opacity:0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
    background-color: #000;
    z-index: 0;
  }
  .span_box:hover .shadow {
    opacity:0.6;
  }
  .delete {
    opacity:0;
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 50%;
    margin-left: -30px;
    width: 60px;
    height: 60px;
    margin-top: -30px;
  }
  .span_box:hover .delete {
    opacity:0.6;
  }

  .look .span_box:hover .shadow{
    display: none;
    opacity:0;
  }
</style>
